import { useSearchParams } from "react-router-dom"
import React, { useEffect, useRef, useState } from 'react';
import { Row, Col, Divider, Form, Input, Button, Checkbox,Upload, message } from 'antd';
import '../../static/css/audit/deta.css'
// 上传图片
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
// 引入封装的接口
import { deta } from '../../apis/audit/deta'
// 上传图片
const getBase64 = (img: RcFile, callback: (url: string) => void) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    reader.readAsDataURL(img);
};

const beforeUpload = (file: RcFile) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
};
const Detail: React.FC = (): JSX.Element => {
    const [params] = useSearchParams()
    const [id, setid] = useState(params.get('id'))
    // 表单的值
    const onFinish = (values: any) => {
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    // 调接口
    const RefRrom: any = useRef()
    const list = async () => {
        const res: any = await deta({ id })
        // console.log(res)
        if (res.code === '00000') {
            RefRrom.current.setFieldsValue(res.data.visitor)
        }
    }
    useEffect(() => {
        list()
    })
    // 上传图片
    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState<string>();

    const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            getBase64(info.file.originFileObj as RcFile, url => {
                // console.log(url)
                setLoading(false);
                setImageUrl(url);
            });
        }
    };
    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );
    return (
        <div style={{ backgroundColor: '#fff' }}>
            <Row>
                <Col flex={2} className="left">
                    <Form
                        ref={RefRrom}
                        name="basic"
                        labelCol={{ span: 0 }}
                        wrapperCol={{ span: 24 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item label="审核人" name="username">
                            <Input bordered={false} disabled={true} />
                        </Form.Item>
                        <Form.Item label="审核状态" name="status">
                            <Input bordered={false} disabled={true} />
                        </Form.Item>
                        <Form.Item label="审核时间" name="addtime">
                            <Input bordered={false} disabled={true} />
                        </Form.Item>
                        <Form.Item label="来访人" name="username">
                            <Input bordered={false} disabled={true} />
                        </Form.Item>
                        <Form.Item label="来访人电话" name="mobile">
                            <Input bordered={false} disabled={true} />
                        </Form.Item>
                        <Form.Item label="来访人身份证" name="card">
                            <Input bordered={false} disabled={true} />
                        </Form.Item>
                        <Form.Item label="进校目的" name="reason">
                            <Input bordered={false} disabled={true} />
                        </Form.Item>
                        <Form.Item label="来访车牌号" name="carnumber" >
                            <Input bordered={false} disabled={true} />
                        </Form.Item>
                        <Form.Item label="进校时间" name="starttime">
                            <Input bordered={false} disabled={true} />
                        </Form.Item>
                        <Form.Item label="离校时间" name="endtime">
                            <Input bordered={false} disabled={true} />
                        </Form.Item>
                    </Form>
                </Col>
                <Col flex={3} className="rights">
                    <Form
                        name="basic"
                        labelCol={{ span: 0 }}
                        wrapperCol={{ span: 24 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item label="行程码" name="x">
                            <Upload
                                name="avatar"
                                listType="picture-card"
                                className="avatar-uploader"
                                showUploadList={false}
                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                beforeUpload={beforeUpload}
                                onChange={handleChange}
                            >
                                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                            </Upload>
                        </Form.Item>
                        <Form.Item label="疫苗" name="y">
                        <Upload
                                name="vaccine"
                                listType="picture-card"
                                className="avatar-uploader"
                                showUploadList={false}
                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                beforeUpload={beforeUpload}
                                onChange={handleChange}
                            >
                                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                            </Upload>
                        </Form.Item>
                        <Form.Item label="健康码" name="j">
                        <Upload
                                name="code"
                                listType="picture-card"
                                className="avatar-uploader"
                                showUploadList={false}
                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                beforeUpload={beforeUpload}
                                onChange={handleChange}
                            >
                                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                            </Upload>
                        </Form.Item>
                        <Form.Item label="核酸码" name="h">
                        <Upload
                                name=" acid code"
                                listType="picture-card"
                                className="avatar-uploader"
                                showUploadList={false}
                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                beforeUpload={beforeUpload}
                                onChange={handleChange}
                            >
                                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                            </Upload>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
        </div>
    )
}
export default Detail